<template>
	<view class="container">
		<!-- 主界面 -->
		<view class="main-content" :class="{ 'sidebar-open': showSidebar }">
			<view class="fixed-header">
				<!-- 顶部安全区域 -->
				<view class="safe-area"></view>

					<!-- 顶部导航栏 -->
				<view class="nav-bar">
					<view class="menu-btn" @tap="toggleSidebar">
						<image src="../../static/menu.png" mode="aspectFit"></image>
					</view>
					<text class="title">新对话</text>
					<view class="new-chat-btn" @tap="newChat">
						<image src="../../static/add.png" mode="aspectFit"></image>
				</view>
			</view>

			</view>

			<!-- 聊天内容区域 -->
			<scroll-view 
				scroll-y 
				class="chat-container"
				:scroll-top="scrollTop"
				:scroll-with-animation="true"
				@scrolltoupper="loadMoreMessages"
			>
				<!-- 欢迎信息 -->
				<view class="welcome-section" v-if="messages.length === 0">
					<image class="logo" src="../../static/deepseek.png" mode="aspectFit"></image>
					<text class="welcome-title">嗨！我是 DeepSeek</text>
					<text class="welcome-subtitle">我可以帮你搜索、答疑、写作，请把你的任务交给我吧~</text>
				</view>

				<!-- 消息列表 -->
				<view v-else class="messages">
					<view 
						v-for="(message, index) in messages" 
						:key="index"
						:class="['message', message.role === 'user' ? 'message-user' : 'message-ai']"
					>
						<view class="message-content">
							<block v-if="message.role === 'assistant'">
								<block v-for="(block, blockIndex) in parseMessage(message.content)" :key="blockIndex">
									<view v-if="block.type === 'code'" class="markdown-pre">
										<view class="code-header">
											<text>{{block.language || 'text'}}</text>
											<view class="copy-btn" @tap="copyCode(block.content)">
												<image src="../../static/copy.png" mode="aspectFit"></image>
												<text>复制代码</text>
											</view>
										</view>
										<view class="code-content">
											<rich-text :nodes="block.content"></rich-text>
										</view>
									</view>
									<text v-else>{{block.content}}</text>
								</block>
							</block>
							<text v-else>{{ message.content }}</text>
						</view>
					</view>
					
					<!-- 等待动画 -->
					<view class="message message-ai" v-if="isLoading">
						<view class="message-content loading-dots">
							<text class="dot"></text>
							<text class="dot"></text>
							<text class="dot"></text>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 输入框区域 -->
			<view class="input-area">
				

				<!-- 输入框 -->
				<view class="input-wrapper">
					<textarea
						class="input-box"
						v-model="inputMessage"
						placeholder="给 DeepSeek 发送消息"
						:disable-default-padding="true"
						:cursor-spacing="20"
						:show-confirm-bar="false"
						@confirm="sendMessage"
						@keydown.enter.prevent="handleEnterPress"
						:confirm-type="'send'"
						:confirm-hold="true"
					/>
				</view>

				<!-- 深度搜索开关 -->
				<view class="search-toggle" 
					:class="{ active: isDeepSearchEnabled }" 
					@tap="toggleDeepSearch"
				>
					<image src="../../static/search.png" mode="aspectFit"></image>
					<text>深度思考 (R1)</text>
				</view>

				<!-- 发送按钮 -->
				<view class="send-btn" 
					:class="{ active: inputMessage.trim().length > 0 }" 
					@tap="sendMessage"
				>
					<image src="../../static/up.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 保持原有的底部导航栏不变 -->
			<view class="tab-bar">
				<view class="tab-item" @tap="switchTab('home')" :class="{ active: currentTab === 'home' }" data-tab="home">
					<image class="tab-icon" :src="getTabIcon('home')" mode="aspectFit"></image>
					<text class="tab-text">首页</text>
				</view>
				<view class="tab-item" @tap="switchTab('notify')" :class="{ active: currentTab === 'notify' }" data-tab="notify">
					<image class="tab-icon" :src="getTabIcon('notify')" mode="aspectFit"></image>
					<text class="tab-text">通知</text>
				</view>
				<view class="tab-item tab-item-center">
					<view class="center-button" :class="{ active: isCenterActive }">
						<image :src="isCenterActive ? '../../static/deepseek-active.png' : '../../static/deepseek.png'" mode="aspectFit"></image>
					</view>
				</view>
				<view class="tab-item" @tap="switchTab('control')" :class="{ active: currentTab === 'control' }" data-tab="control">
					<image class="tab-icon" :src="getTabIcon('control')" mode="aspectFit"></image>
					<text class="tab-text">控制</text>
				</view>
				<view class="tab-item" @tap="switchTab('setting')" :class="{ active: currentTab === 'setting' }" data-tab="setting">
					<image class="tab-icon" :src="getTabIcon('setting')" mode="aspectFit"></image>
					<text class="tab-text">设置</text>
				</view>
			</view>
		</view>

		<!-- 侧边菜单遮罩层 -->
		<view class="sidebar-mask" v-if="showSidebar" @tap="toggleSidebar"></view>

		<!-- 侧边栏菜单 -->
		<view class="sidebar" :class="{ 'show': showSidebar }">
			<view class="sidebar-header">
				<text>历史对话</text>
			</view>
			<scroll-view scroll-y class="chat-list">
				<view 
					v-for="(chat, index) in chatHistory" 
					:key="index" 
					:class="['chat-item', { active: currentChatId === chat.id }]"
					@tap="switchChat(chat.id)"
				>
					<text class="chat-title">{{ chat.title || '新对话' }}</text>
					<text class="chat-time">{{ chat.time }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
  import deepseek from "./deepseek";
  export default deepseek
</script>

<style>
  @import url("./deeepseek.css");
</style> 